<!--
    * Time    : 2021-03-11 19:44:12
    * Author  : zhangTj
    * Desc    : 文字单选/多选
-->

<template>
    <div class="p-15p">
        <div class="font-14">
            <span class="text-danger" v-if="value.required">*</span>
            {{ index + 1 }}.{{ value.title }}
        </div>
        <div class="py-1">
            <template v-if="value.subType == 'radio'">
                <van-radio-group v-model="value.content">
                    <van-cell-group>
                        <van-cell
                            v-for="option in value.optionList"
                            :key="option.id"
                            :title="option.value"
                            clickable
                            @click.stop="value.content = option.id"
                        >
                            <template #icon>
                                <van-radio class="mr-1" :name="option.id" :checked-color="themes.color" />
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-radio-group>
            </template>
            <template v-else>
                <van-checkbox-group v-model="value.content">
                    <van-cell-group>
                        <van-cell
                            v-for="(option, index) in value.optionList"
                            :key="option.id"
                            clickable
                            :title="option.value"
                            @click.stop="toggle(index)"
                        >
                            <template #icon>
                                <van-checkbox :name="option.id" class="mr-1" shape="square" ref="checkboxes" :checked-color="themes.color" />
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-checkbox-group>
            </template>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    name: 'TextSelect',
    props: {
        value: Object,
        index: {
            type: Number | String,
            default: 0
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    methods: {
        toggle(index) {
            this.$refs.checkboxes[index].toggle()
        }
    }
}
</script>
